<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>{$category.name}</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <a href="#ch_nav" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" id="ch_ri"><em class="fs_l">筛选</em></a>
		    <h1 class="mui-title">{$category.name}</h1>
		</header>
		<include file="public/bottom_nav" />
		<div class="ch_nav" id="ch_nav">
			<div class="ch_box">
				<div class="ch_box_m">
				<foreach name='attribute' item='vo' key='k'>
					<div class="ch_list  attr_{$vo.attr_id}" attr-id='{$vo.attr_id}'>
						<div class="ch_tit fs_l">{$vo.attr_name}<i class="mui-icon mui-icon-arrowdown fs_xl"></i></div>
						<div class="ch_item cls">
							<ul class="cls">
								<foreach name="vo.attr_values" item='v' key=''>
								<li>
									<a class=""><em class="fs_xs">{$v}</em></a>
								</li>	
								</foreach>
							</ul>
						</div>
					</div>
				</foreach>
				</div>
				<div class="ch_btn">
					<a class="ch_res">取消</a>
					<a class="ch_sub">完成</a>
				</div>
			</div>
			<div class="left_kb" style="width:25%;float: left;height: 100%;background: transparent;"></div>
		</div>
		<div id="pullrefresh" class="mui-content ch_nav_t fs_xl anli mui-scroll-wrapper">
			<div class="mui-scroll hot_list cls">
				<ul class="mui-table-view mui-table-view-chevron cls" id="goodslist">
					<if empty($goodsList)>
						<center>暂无商品!</center>
					<else>
						<foreach name="goodsList" item="vo" key="k">
						<li class="mui-table-view-cell">
							<a href="{:U('Mobile/Goods/goodsInfo',array('id'=>$vo.goods_id))}">
								<img src="{$vo[goods_id]|goods_thum_images=200,200}" />
								<p class="good_n fs_s">{$vo.goods_name}</p>
								<p><span class="s_p1 fs_l">¥{$vo.shop_price}</span></p>
								<span class="gwc mui-icon iconfont icon-gouwuche2 fs_xi"></span>
							</a>
						</li>
						</foreach>
					</else>	
					</if>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			$(".good_n").each(function(){
				var srt=$(this).text();
				if(srt.length>20){
					var new_s=srt.substring(0,20)+"...";
					$(this).text(new_s);
				}
			})
			$(function() {
				var winW = $(window).width();
				var liW = (winW - 1) / 2;
				var alW = (winW - 5) / 2;
				//				var winH=$(window).height();
				//				$(".ch_box_m").height(winH-20);
				$(".dz_theme_list li").width(liW);
				$(".al_list li").width(alW);
				$(".dz_gd1 a").toggle(function() {
					$(this).find("i").removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowup");
					$(".dz_ul").show();
				}, function() {
					$(".dz_ul").hide();
					$(this).find("i").removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown");
				})
				$(".ch_sub,.ch_res,.left_kb").click(function() {		
					$(".ch_box,.ch_btn").animate({
						width:'0'
					});
					$("#ch_nav").hide();
				});
				$(".ch_res").click(function(){
					$(".ch_list li").removeClass("ch_right");
					$(".ch_list li").find("i").remove();
					getdatas('search',0);
				})
				$("#ch_ri").click(function() {
					$("#ch_nav").show(1);
					$(".ch_box,.ch_btn").animate({
						width:'75%'
					},300);
				})
				$(".ch_tit i").toggle(function() {
					$(this).removeClass("mui-icon-arrowdown").addClass("mui-icon-arrowup");
					$(this).parent().siblings(".ch_item").css("height", "auto");
				}, function() {
					$(this).removeClass("mui-icon-arrowup").addClass("mui-icon-arrowdown");
					$(this).parent().siblings(".ch_item").css("height", "3em");
				});
				$(".ch_item li").click(function() {
					if($(this).find("i").length <= 0) {
						$(this).addClass("ch_right").siblings().removeClass("ch_right");
						$(this).find("a").prepend('<i class="mui-icon mui-icon-checkmarkempty fs_xi"></i>');
						$(this).siblings().find("i").remove();
						getdatas('search',0);
					}else{
						$(this).removeClass("ch_right");
						$(this).find("i").remove();
						getdatas('search',0);
					}
				});
				$(".anli").on('tap','li',function() {
  					var sur=$(this).find("a").attr("href");
  					mui.openWindow({
    					url: sur
  					});
				});
			})
		</script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});

			var count = 0;
			var pagenum = {$pagenum};
			var limit = {$limit};//设置请求条数
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count >= pagenum)); //参数为true代表没有更多数据了。
					getdatas('pullRefresh',limit*count);
				}, 1500);
			}
			
			
			
			//Ajax请求数据,mod为pullRefresh则是上拉加载数据，不需要重置数据，其他情况则必须重置数据
			function getdatas(mod,start){
				var att =new Array();
				<foreach name='attribute' item="vo" key="k">
				    att[{$k}] = new Array();
				    
				    att[{$k}][0] = {$vo.attr_id};
				    att[{$k}][1] = $('.attr_{$vo.attr_id} .ch_right .fs_xs').text();
				    if(att[{$k}][1] == ''){
				    	 att.splice({$k},1);
				    }
				</foreach>
				var type = {$type};
				var cid = {$cid};
				$.post("{:U('Goods/category')}",{'type':type,'start':start,'limit':limit,'attr':att,'cid':cid},function(content){
					if(content.status == 1){
						if(mod != 'pullRefresh'){
							$("#goodslist").html(" ");//重置数据
						}
						var table = document.body.querySelector('.mui-table-view');
						pagenum = content.data.pagenum;
                        $.each(content.data.goodsList, function(i,goods) {
                        	var li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '	<a href="/Mobile/Goods/goodsInfo/id/'+goods.goods_id+'">'+
										   '		<img src="'+goods.original_img+'"/>'+
										   '		<p class="good_n fs_s">'+goods.goods_name+'</p>'+
										   '		<p><span class="s_p1 fs_l">¥'+goods.shop_price+'</span></p>'+
										   '		<span class="gwc mui-icon iconfont icon-gouwuche2 fs_xi"></span>'+
										   '		</a>';
							table.appendChild(li);
                        });
						$(".mui-pull").show();
					}
					else{
						if(mod != 'pullRefresh'){
						   $("#goodslist").html("<center>暂无相关商品</center>");
						   $(".mui-pull").hide();
						}
					}
				},'json');
				
			}
			
		</script>
	</body>

</html>